﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <link type="text/css" rel="stylesheet" media="all" href="../styles/global.css" />
        <link type="text/css" rel="stylesheet" media="all" href="../styles/global_color.css" />
        <script src="../../js/jquery-3.2.1.js"></script>
        <script language="javascript" type="text/javascript">
            //写入下拉框中的年份和月份
            function initialYearAndMonth() {
                //写入最近3年
                var yearObj = document.getElementById("selYears");
                var year = (new Date()).getFullYear();
                for (var i = 0; i <= 2; i++) {
                    var opObj = new Option(year - i, year - i);
                    yearObj.options[i] = opObj;
                }
                //写入 12 月
                var monthObj = document.getElementById("selMonths");
                var opObj = new Option("全部", "全部");
                monthObj.options[0] = opObj;
                for (var i = 1; i <= 12; i++) {
                    var opObj = new Option(i, i);
                    monthObj.options[i] = opObj;
                }
            }
        </script>
    </head>
    <body onload="initialYearAndMonth();">
        <!--Logo区域开始-->
        <div id="header">
            <img src="../images/logo.png" alt="logo" class="left"/>
            <a href="/logout">[退出]</a>
        </div>
        <!--Logo区域结束-->
        <!--导航区域开始-->
        <div id="navi">                        
            <ul id="menu">
                <li><a href="/index" class="index_on"></a></li>
                <li><a href="/rolelist" class="role_off"></a></li>
                <li><a href="/adminList" class="admin_off"></a></li>
                <li><a href="/feelist" class="fee_off"></a></li>
                <li><a href="/accountlist" class="account_off"></a></li>
                <li><a href="/servicelist" class="service_off"></a></li>
                <li><a href="/billList" class="bill_off"></a></li>
                <li><a href="/reportList" class="report_off"></a></li>
                <li><a href="/userInfo" class="information_off"></a></li>
                <li><a href="/userModiPwd" class="password_off"></a></li>
            </ul>            
        </div>
        <!--导航区域结束-->
        <!--主要区域开始-->
        <div id="main">
            <form>
                <!--查询-->
                <div class="search_add" onload="initialYearAndMonth();">
                    <div>身份证：<input type="text" class="text_search" /></div>
                    <div>账务账号：<input type="text" class="width100 text_search" /></div>
                    <div>姓名：<input type="text" class="width70 text_search" /></div>
                    <div>
                        <select class="select_search" id="selYears">
                        </select>
                        年
                        <select class="select_search" id="selMonths">
                        </select>
                        月
                    </div>
                    <div><input type="button" value="搜索" class="btn_search" /></div>
                </div>  
                <!--数据区域：用表格展示数据-->     
                <div id="data">            
                    <table id="datalist">
                    <tr>
                        <th class="width50">账单ID</th>
                        <th class="width70">姓名</th>
                        <th class="width150">身份证</th>
                        <th class="width150">账务账号</th>
                        <th>费用</th>
                        <th class="width100">月份</th>
                        <th class="width100">支付方式</th>
                        <th class="width100">支付状态</th>                                                        
                        <th class="width50"></th>
                    </tr>
                </table>
                
                <p>业务说明：<br />
                1、设计支付方式和支付状态，为用户自服务中的支付功能预留；<br />
                2、只查询近 3 年的账单，即当前年和前两年，如2013/2012/2011；<br />
                3、年和月的数据由 js 代码自动生成；<br />
                4、由数据库中的ｊｏｂ每月的月底定时计算账单数据。</p>
                </div>                    
                <!--分页-->
                <div id="pages">
                </div>                    
            </form>
        </div>
        <!--主要区域结束-->
        <div id="footer">
            <p>[源自北美的技术，最优秀的师资，最真实的企业环境，最适用的实战项目]</p>
            <p>版权所有(C)云科技有限公司 </p>
        </div>
    <script src="../../js/jquery-3.2.1.js"></script>
    <script src="../../js/parseDate.js"></script>
    <script>
        var ip = 1;
        $.ajax({
           url:"/costPage",
           type:"post",
           data:{
               pagenum: ip
           },
           success:function (data) {
               for(var i in data.list) {
                   var list=data.list[i];
                   for (var j in list.cList) {
                       var cList = list.cList[j];
                       var costId = cList.costId;
                       var costtype = cList.costType;
                       var status = cList.status;
                       if (status == 0) {
                           status = "已支付";
                       } else if (status == 1) {
                           status = "未支付";
                       } else {
                           status = "已取消";
                       }
                       if (costtype=='a'){
                           costtype="现金";
                       } else if (costtype=='b'){
                           costtype="刷卡";
                       }else{
                           costtype="其他";
                       }
                       var costType=costtype;
                       var statu = status;
                       var startime = cList.startime;
                       var baseDuration = cList.baseDuration;
                       var baseCost = cList.baseCost;
                       var unitCost = cList.unitCost;
                       for (var k in list.aList) {
                           var aList = list.aList[k];
                           var realName = aList.realName;
                           var idcardNo = aList.idcardNo;
                           var loginName = aList.loginName;
                           var lastLoginTime = aList.lastLoginTime;
                           var lastStart = lastLoginTime - startime;
                           var timeLongSecound = (lastStart) / 1000;
                           var timeLongHour = timeLongSecound / 3600;
                           var spareTime = timeLongHour - baseDuration;
                           var cost = 0;
                           if (spareTime > 0) {
                               cost = baseCost + spareTime * unitCost;
                           } else {
                               cost = baseCost;
                           }
                           var cD = aList.createDate;
                           var createDate = getTime(cD);
                       }
                   }
                   $("#datalist").append("<tr><td>" + costId + "</td><td>" + realName + "</td><td>" + idcardNo + "</td><td>" + loginName + "</td><td>" + cost + "</td><td>" + createDate + "</td><td>"+costType+"</td><td>" + statu + "</td><td><a href='javascript:void(0)' title='账单明细' onclick='desc("+costId+")'>明细</a></td></tr>");
               }
               $("#idcardNo").val(''+idcardNo+'');
               $("#loginName").val(''+loginName+'');
               $("#realName").val(''+realName+'');
               //            当前页码
               var pageNum = data.pageNum;
//            每页的数量
               var pageSize = data.pageSize;
//            当前页的数量
               var size = data.size;
//            数据总数
               var total = data.total;
//            一共多少页
               var pages = data.pages;
//            首页是多少
               var firstPage = data.firstPage;
//            上一页是多少
               var prePage = data.prePage;
//            下一页是多少
               var nextPage = data.nextPage;
//            最后一页是多少
               var lastPage = data.lastPage;
//            是否是首页
               var isFirstPage = data.isFirstPage;
//            是否是尾页
               var isLastPage = data.isLastPage;
               if (isFirstPage) {
                   prePage = prePage + 1;
               }
               if (isLastPage) {
                   nextPage = lastPage;
               }
               $("#pages").append($("<a href='javascript:void(0)' onclick='page(" + prePage + ")'>" + "<<<" + "</a>"));
               for (i = 1; i <= lastPage; i++) {
                   $("#pages").append($("<a href='javascript:void(0)' onclick='page(" + i + ")'>" + i + "</a>"))
               }
               $("#pages").append($("<a href='javascript:void(0)' onclick='page(" + nextPage + ")'>" + ">>>" + "</a>"));
               var urlstatus = false;
               if (!urlstatus) {
                   $("#pages a").eq(1).addClass('current_page');
               }
           }
        });
        function desc(costId){
            window.location.href='/billItem?costId='+costId+'';
        }
        function page(i) {
            ip = i;
            $.ajax({
                url: "/costPage",
                type: "post",
                data: {
                    pagenum: ip
                },
                success: function (data) {
                    $("#datalist").html("");
                    $("#datalist").append("<tr><th class='width50'>账单ID</th><th class='width70'>姓名</th><th class='width150'>身份证</th><th class='width150'>账务账号</th><th>费用</th><th class='width100'>月份</th><th class='width100'>支付方式</th><th class='width100'>支付状态</th><th class='width50'></th></tr>");
                    for(var i in data.list) {
                        var list=data.list[i];
                        for (var j in list.cList) {
                            var cList = list.cList[j];
                            var costId = cList.costId;
                            var costtype = cList.costType;
                            var status = cList.status;
                            if (status == 0) {
                                status = "已支付";
                            } else if (status == 1) {
                                status = "未支付";
                            } else {
                                status = "已取消";
                            }
                            if (costtype=='a'){
                                costtype="现金";
                            } else if (costtype=='b'){
                                costtype="刷卡";
                            }else{
                                costtype="其他";
                            }
                            var costType=costtype;
                            var statu = status;
                            var startime = cList.startime;
                            var baseDuration = cList.baseDuration;
                            var baseCost = cList.baseCost;
                            var unitCost = cList.unitCost;
                            for (var k in list.aList) {
                                var aList = list.aList[k];
                                var realName = aList.realName;
                                var idcardNo = aList.idcardNo;
                                var loginName = aList.loginName;
                                var lastLoginTime = aList.lastLoginTime;
                                var lastStart = lastLoginTime - startime;
                                var timeLongSecound = (lastStart) / 1000;
                                var timeLongHour = timeLongSecound / 3600;
                                var spareTime = timeLongHour - baseDuration;
                                var cost = 0;
                                if (spareTime > 0) {
                                    cost = baseCost + spareTime * unitCost;
                                } else {
                                    cost = baseCost;
                                }
                                var cD = aList.createDate;
                                var createDate = getTime(cD);
                            }
                        }
                        $("#datalist").append("<tr><td>" + costId + "</td><td>" + realName + "</td><td>" + idcardNo + "</td><td>" + loginName + "</td><td>" + cost + "</td><td>" + createDate + "</td><td>"+costType+"</td><td>" + statu + "</td><td><a href='javascript:void(0)' title='账单明细' onclick='desc("+costId+")'>明细</a></td></tr>");
                    }
                    $("#idcardNo").val(''+idcardNo+'');
                    $("#loginName").val(''+loginName+'');
                    $("#realName").val(''+realName+'');
                    //            当前页码
                    var pageNum = data.pageNum;
//            每页的数量
                    var pageSize = data.pageSize;
//            当前页的数量
                    var size = data.size;
//            数据总数
                    var total = data.total;
//            一共多少页
                    var pages = data.pages;
//            首页是多少
                    var firstPage = data.firstPage;
//            上一页是多少
                    var prePage = data.prePage;
//            下一页是多少
                    var nextPage = data.nextPage;
//            最后一页是多少
                    var lastPage = data.lastPage;
//            是否是首页
                    var isFirstPage = data.isFirstPage;
//            是否是尾页
                    var isLastPage = data.isLastPage;
                    if (isFirstPage) {
                        prePage = prePage + 1;
                    }
                    if (isLastPage) {
                        nextPage = lastPage;
                    }
                    $("#pages").html("");
                    $("#pages").append($("<a href='javascript:void(0)' onclick='page(" + prePage + ")'>" + "<<<" + "</a>"));
                    for (i = 1; i <= lastPage; i++) {
                        $("#pages").append($("<a href='javascript:void(0)' onclick='page(" + i + ")'>" + i + "</a>"))
                    }
                    $("#pages").append($("<a href='javascript:void(0)' onclick='page(" + nextPage + ")'>" + ">>>" + "</a>"));
                    $("#pages a").siblings('a').removeClass('selected');
                    $("#pages a").eq(pageNum).addClass('current_page');
                }
            });
        }
    </script>
    </body>
</html>
